中后台领域低代码搭建设计与实践
前言
2021年5月22日，哈啰技术沙龙-大前端的探索与实践，在杭州成功举办。
以下是由 @杜诗晨（庙爷）分享的主题
什么是低代码搭建
通过提供一种可视化的应用开发环境，降低或去除对原生代码编写的需求量快速构建应用程序。
传统开发交付一个产品的流程，首先产品输出 prd，然后设计 ui 设计进行设计，设计完成给到前端，前端再去开发。如果是个新项目可能还要这种配置各种复杂环境。同时后端也在开发，然后联调、测试。其实现在大部分的公司都是这种开发流程。那这种缺点就很明显，涉及到的人非常多，开发周期也变得非常长。
低代码搭建是一个什么样的流程？如果是一个成熟的配置搭建平台，只需要提供一个配置平台，开发人员不论是刚毕业的大学生或者是前端小白，甚至可能是一个后端开发，都可以通过这个配置平台搭建，快速生成网页。
关于低代码的市场规模和衍生的历史大家可以从下图中了解一下，这里提供两份报告作为延伸学习：海比研究报告 | 艾瑞咨询
概念衍生历史
低代码这个概念其实很早就有了，80年代的时候提出了第四代编程语言，这个第四代是什么意思呢，第一代是机器语言，第二代汇编语言，第三代高级语言。前三代都是操作语言，需要编程指出怎么做，一步一步的写运行步骤，这样是有学习成本的，并且项目开发周期长，出于商业需要第四代语言被软件厂商提出，在一定程度上只需要说明做什么，有什么目的，不需要写出怎么做的过程。
2000 年 vpl 被提出，可视化编程语言，意思就是用户用过图形化操作程序元素而不是通过文本制定来创建程序，基于流的概念比如虚幻引擎，还有一些运用在3D编程，音乐合成，信号处理，物联网嵌入式等等领域。
2014年知名咨询公司提出了低代码/零代码的概念，在这之前国外有很多低代码产品出现并且商业化
2016年，国内相继发布这些低代码的平台。国内知名的像阿里百度腾讯，他们都有这种搭建平台。
在今年（2021），整个中国市场已经形成了完整的低代码无代码的生态体系。就比如说像现在这种 aPass 平台或者是 Sass 平台之类的，平台会包含的低代码去快速搭建这种应用。
市场规模
投资界似乎也发现了这种趋势，全球规模在去年的时候已经达到了八十四亿美元。预计今年超过百亿。23年超过200亿。
比如说二月份的时候，就有一家创业公司，他们融了大概上亿美元，估值也有几十亿。所以说这一块从全球的低代码的市场规模来说，低代码还是非常有潜力的。
搭建分类
现在市场上基本上分为两类搭建类型，一类是营销类搭建 no code，一类是通用类搭建，就是我们所说的 low code 和 pro code。营销类 no node 无需编码，直接生成营销活动，前端资源紧缺的时候，后端开发人员也可通过 low code 可搭建中台领域的页面，前端这边为了避免各种工程环境，减低门槛也可通过 pro code 的形式来去搭建。
面向人群
那么这么分类我认为是面向的人群不同，一个特别通用的搭建平台，可能复杂度就上升了很高，所以说我们要做这个低代码搭建平台的时候，一定要想好我们面向的人群是什么？
营销类 no node 无需编码，直接生成营销活动，前端资源紧缺的时候，后端开发人员也可通过 low code 可搭建中台领域的页面，前端这边为了避免各种工程环境，减低门槛也可通过 pro code 的形式来去搭建
中后台领域痛点
首先交互不统一，比如说有一些很相似的页面，但是由不同的产品或者设计师出的图。
那实际上他们想要达到的效果是很相似的。但是交互不同，不同的前端开发出来的效果也不一样。不同职级的开发可维护性就会差一点，代码可能会复杂一些，会出现不同的编码风格。中台还有一个痛点的就是中台的系统非常多，业务重，人员有缺口。我之前负责的那个域，前后端比例当时是有 1：7 的样子，借人也好，招人也好，都是很难去补上这个缺口。
设定目标
所以我们设定了三个目标，一个是提效降本。我们怎么样去把这一块的研发效能提上来。
第二个目标是部分生产力可转移后端，让后端也有能力输出前端页面
第三点就是抽象中后台的系统基础组件。前端在组件化的过程中逐渐沉淀，复用这些能力，赋能到搭建平台中。
如何做？波塞冬建站平台
有了这些目标，促使我们做了波塞冬建站平台，通过可视化操作 + 部分编码(或者不编码)生成中后台系统。让前端业务开发变成组件开发，逐渐沉淀可复用组件，让简单业务少编码甚至不编码。为前端增效，为后端赋能。
使用数据
这个平台上线之后，线上的有117个页面在运行，共发布了870次，其中已经设计了6个团队，提升的人效也很显著，假设我们平均开发一个增量页面需要3人日，用波塞冬只需要一人日，老页面迭代修改配置也只需要0.5d
平台流程
给大家讲解下平台原理，比如说一个创建者，他首先要去波塞冬平台创建页面，生成一份 schema ，这份 schema 被波塞冬后端保存在SQL中，我们的用户，也就是页面访问者，通过业务平台网站获取页面，这里边相当于业务平台网站有个sdk，他直接取拉波塞冬保存的schema，sdk通过 schema 渲染组件 和 业务数据的接口，这样一个页面就展示出来了
那我们这边也有很多组件贡献者，如果创建者不满足需求的，贡献者这边去维护组件这样就能贡献生态
平台架构
整个平台的架构是这样的：
底层我们是拿vue搭建，不过这块技术选型哪个框架都可以，只要定义好 schema，react + antd 也能搞
组件这一块就是根据固定的 schema 进行封装，未来可能还有一些业务组件接入
渲染这一层主要是提供给开发者用来丰富组件库或一些其他业务场景
平台能力也就是我们要提供的这个界面，主要是一些用户可以操作的功能，这些功能想一下入手还有一点小成本，我们提供了文档，视频等，可以做到边接入边开发，还提供了一些实例供配置方借鉴
接入方式
我们的解析方式有三种，一种是 sdk直接引入，这样方便升级，也方便二次开发，sdk的引入方式非常灵活。
还有一种是 ifame 引入，这样只需引入一个标签即可，剩下的都在波塞冬里配置。
一键建站的方式，相当于站点维度，没有项目的概念，域名菜单权限页面，都是在波塞冬里完成的，不需要本地环境，这种比较适合后端开发人员
渲染引擎
展示一下 sdk 的引用，我们可能会在不同开发环境中引入，这里提供环境变量的配置
一键建站
刚才有介绍我们有三种引入方式，给大家看下第三种一键建站是怎么做的，我们加强了应用管理，一个应用就是一个站点，菜单，域名都是在平台里申请，这样用户通过页面访问就是配置的界面，完全不需要再去申请工程，这里我们用了代理的方式进行一个转发，转发的目标是一个基座，类似微前端的那个基座，只不过这个基座我们通过当前域名拉取配置，最终提供给用户。
页面布局
带大家看一下创建页面的布局，最左侧是组件区，目前是基础组件，这里未来可能会做组件分类，把业务组件和自定义组件也接进来，中间是布局设计区，比如说列表页有固定三个区域，筛选项，中部功能区，列表，表单页不做限制，右侧为配置区，可以配置绑定字段和文案还有一些额外属性，组件的交互，像select这种option是接口调用的数据，还可以配置远程接口
模型设计（JSON SCHEMA）
我们创建页面后，会生成一份 schema ，什么是 json schema ，简单介绍一下，json shema 是 json 的一种约束，用来定义json的数据结构和验证格式，我们在这里用来保证数据的一致性
每个页面有一个主体，用来描述版本和一些原信息，body就是他的内容
JSON SCHEMA
我们目前页面分为两种，一种就是列表页面，一种是 form 页，但是他们的描述协议都是一样的，那基本的组件描述我们定义好了，这样其实简单的需求就能实现了，但是前端避免不了交互这一层，比如说一个选择框，当我选择了 A，B会触发一个事件，并且B还要拿到A所携带的入参信息
操作事件
我们这边做了一个操作事件功能，我们只需要把组件的 ref 设置好，操作事件这一块就可以定义他的出参入参，方便交互
数据中心
接口配置这里，比如说一个 select 从远程接口获取到一个枚举，就可以存下来，给其他组件消费
自定义插槽
比如说平台目前有不支持的组件或交互，还没有维护在平台里的，这里可以利用 vue 的 slot 进行二次开发，只需要拖入一个 slot
自定义插槽-编码
slot 里的组件可以获取到配置里的 ref 和想要拿到的 scope，做任何你想做的事儿
稳定性
我们做低代码平台，归根到底是一个渲染引擎渲染一组 schema ，那么稳定性也得考虑，我们每次修改线上配置，可能心情如图，那我发布时怎么保证准确性，传统开发我们会有一个review 的过程，我们就把这个过程也搬上来了
SCHEMA DIFF & 版本对比
schema diff 每次发布时，需要选择版本来确认我改了什么，大大降低了风险。
发布时也要进行二次确认
未来规划
AUTO-CODE
我们目前的能力，在版本对比这一块希望能做到 merge，并且提供可视化，也就是说你不一定非要看 schema 这种东西，组件这里继续丰富，能承载更多的需求，low-code 目标就做到 no-code 让非开发人员直接生成页面，不需要写一点代码，最终这个生产力就可以转移，终极目标就是做成 auto-code ，利用机器学习识别设计图，直接生成网站，抹去大部分配置，auto-code 目前业界有很多公司已经实现，我们也在慢慢摸索。
The End
如果你觉得这篇内容对你挺有启发，请你轻轻点下小手指，帮我两个小忙呗：
1、点亮「在看」，让更多的人看到这篇满满干货的内容；
2、关注公众号「哈啰技术团队」，可第一时间收到最新技术推文。
如果喜欢就点个👍喔，有您的喜欢⛽️，我们会更有动力输出有价值的技术分享滴；